<template>
	<view :class="{'light':theme=='light'}">
		<view class="bg2c h100">
			
		</view>
		<view class="plr10 posRelt" style="top: -90upx;">
			<view class="ft14 ptb5 bgPart radius4">
<!-- 				<view class="pt10 plr10 ft16">
					我的团队
				</view> -->
				<view class="flex alcenter tc">
					<view class="ptb10 flex1">
						<text class="ft14">{{invite_size}}</text> 
						<view class="gray mt10">直推人数</view> 
					</view>
					<view class="ptb10 flex1">
						<text class="ft14">{{team_size}}</text> 
						<view class="gray mt10">团队人数</view> 
					</view>
				</view>
			</view>
		</view>
		<view class="posRelt" style="top: -90upx;">
			<!-- <view class="plr10 mt20">
				<view class="flex tc radius4" style="border: 1px solid #02c289;">
					<view :class="['flex1 ptb10 green',{'bgGreen white':type==0}]" @click="changeType(0)">直推队友已实名({{real_invite_size}})</view>
					<view :class="['flex1 ptb10 green',{'bgGreen white':type==1}]" @click="changeType(1)">直推队友未实名({{noreal_invite_size}})</view>	
				</view>
			</view>
			 -->
			<view class="bgPart mt10 ft12">
				<view  class="w90 mauto flex alcenter between bdb_blue3 ptb10" v-for="(item,i) in list" :key="i">
					<view class="flex alcenter w100">
						<!-- <image :src="domain+item.head_portrait" class="wt40 h40 radius50p mr10"></image> -->
						<view class="flex between flex1">
							<view class="">{{item.mobile||item.email | noPassByMobile}}</view>
							<view class="mt0 gray">{{item.updated_at}}</view>
						</view>
					</view>
					<!-- <image src="/static/image/arrrowr.png" class="wt15 h15"></image> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default{
		data(){
			return{
				type:0,
				show:true,
				page:1,
				hasMore:true,
				list:[],
				invite_size:'',
				team_size:'',
			}
		},
		computed: {
			...mapState(['theme'])
		},
		filters:{
			// 星号处理手机号
			noPassByMobile:function(str){
				if(null != str && str != undefined){
					var pat=/(\d{3})\d*(\d{4})/;
					return str.replace(pat,'$1****$2');
				} else {
					return "";
				}
			},
		},
		onShow() {
			// this.$utils.setThemeTop(this.theme);
			uni.setNavigationBarTitle({
				title:this.$t('mine').m_team
			})
			this.getRecords();
		},
		methods:{
			changeType(type){
				this.type = type;
				this.page=1;
				this.hasMore=true;
				this.getRecords();
			},
			getRecords(){
				let that = this;
				this.$utils.initDataToken({url:'user/my_team',data:{page:this.page}},(res,msg)=>{
					this.invite_size=res.invite_size;
					this.team_size=res.team_size;
					let data = res.team_list.data;
					that.list = (that.page == 1) ? data : that.list.concat(data);
					that.hasMore = (res.team_list.last_page == res.team_list.current_page) ? false : true;
				})
			},
			onPullDownRefresh(){
				this.page=1;
				this.hasMore=true;
				this.getRecords();
			},
			onReachBottom() {
				if(!this.hasMore){
					return;
				} 
				this.page++;
				this.getRecords();
			},
		}
	}
</script>

<style>

</style>
